<template>
  <div class="contact-wrapper">
    <el-row class="container">
      <div class="title">客服电话：</div>
      <el-input v-model="info.shop_tel" type="text" placeholder="请输入客服电话" class="input-container" />
    </el-row>
    <el-row class="container">
      <div class="title">区域：</div>
      <el-input v-model="info.province" type="text" :disabled="true" class="input-container1" />
      <el-input v-model="info.city" type="text" :disabled="true" class="input-container1" />
      <el-input v-model="info.area" type="text" :disabled="true" class="input-container1" />
    </el-row>
    <el-row class="container">
      <div class="title">详细地址：</div>
      <el-input v-model="info.shop_addr" type="text" class="input-container2" />
    </el-row>
    <el-row class="container">
      <div class="title">&nbsp;</div>
      <Map v-if="show" :info="info" class="map" @changePoint="handleChangePoint" />
    </el-row>
    <el-row class="container">
      <div class="title">经度：</div>
      <el-input v-model="info.lng" type="text" :disabled="true" class="input-container1" />
    </el-row>
    <el-row class="container map">
      <div class="title">纬度：</div>
      <el-input v-model="info.lat" type="text" :disabled="true" class="input-container1" />
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>
<script>
import { getStoredValue as getContact, storedValue as contactInfo } from '@/api/params'
import Map from '@/components/map'
export default {
  name: 'DatumContact',
  components: {
    Map
  },
  data() {
    return {
      info: {}
    }
  },
  computed: {
    show() {
      return Object.keys(this.info).length
    }
  },
  created() {
    this.getContactInfo()
  },
  methods: {
    async getContactInfo() {
      const res = await getContact()
      this.info = res.data.store
    },
    async handleSave() {
      const { info } = this
      const type = 'info'
      const flag = this.validity()
      if (!flag) return
      await contactInfo({ type, ...info })
      this.$message.success({
        message: '保存成功',
        duration: 1000
      })
    },
    handleChangePoint(point) {
      this.info.lng = point.lng
      this.info.lat = point.lat
    },
    validity() {
      const { info } = this
      // const phoneReg = /^1[3456789]\d{9}/
      if (info.shop_addr.trim() === '') {
        this.$message.warning({
          message: '详细地址不能为空',
          duration: 1000
        })
        return false
      }
      if (info.shop_tel.length < 11) {
        this.$message.warning({
          message: '客服电话号格式不正确',
          duration: 1000
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .container{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title {
      width: 140px;
    }
    .input-container{
      width: 400px;
    }
    .input-container1 {
      width: 200px;
      margin-right: 10px;
    }
    .input-container2 {
      width: 620px;
    }
    .timer-item{
      margin-right: 20px;
    }
    .map{
      width: 560px;
      height: 560px;
    }
  }
}
</style>
